<template>
  <div >
    
    <!-- 选择 -->
    <div class="image-list">
      <div class="img-box">
        <div class="item" v-for="(item, index) in fileList" :key="index">
          <el-image
            :src="getImageUrl(item)"
            class="img"
            :preview-src-list="[item]"
            fit="contain"
          />
          <div class="operate">
            <div class="rank">
              <el-icon color="#fff"><Rank /></el-icon>
            </div>
            <div class="delete" @click.stop="handleDelete(index)">
              <el-icon color="#fff"><Delete /></el-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="image-select-box">
        <div
          class="image-select-item"
          v-if="props.limit > fileList.length"
          @click="openPicker"
        >
          <el-icon><Plus /></el-icon>
        </div>
      </div>
    </div>

    <!-- 图库 -->
    <picker
      ref="pickerRef"
      @confirm="pickerConfirm"
      :limit="props.limit"
      
    ></picker>
  </div>
</template>
<script setup>
import { reactive, ref, watch,nextTick} from "vue";
import picker from "./picker.vue";
import appStore from '@/app/admin/store/app'

const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue:{
    type:[ Array, String,Object],
    default(){
      return '';
    }
    
  },

  // 限制数量
  limit: {
    type: [Number, String],
    default() {
      return 1;
    },
  },
});
console.log(99999,props)

const pickerRef = ref([]);

// 图片
const fileList = ref([]);
// 拷贝（）
const modelValueCopy = ref(props.modelValue);
watch(
  modelValueCopy,
  (val) => {
    console.log(99, val,props.modelValue);
    let arr = Array.isArray(val)
      ? val
      : val == "" || val == undefined
      ? []
      : [val];
      arr.forEach(function(item,index){
        arr[index] = item.replace(appStore.state.config.oss_domain,'')
      })
      fileList.value = arr
    
  },
  {
    deep:true,
    immediate: true,
  }
);



/**
 * 获取图片完整地址
 * @param {*} uri 
 */
const getImageUrl =  (uri)=>{
  let oss_domain = appStore.state.config.oss_domain

  return uri ? `${oss_domain}${uri}` : '';
}

const openPicker = () => {
  pickerRef.value.open();
};

const pickerConfirm = (value) => {
  value.forEach((element) => {
    fileList.value.push(element.uri);
  });
 
  if (props.limit == 1) {

    emit("update:modelValue", fileList.value[0]);

  } else {
    
    emit("update:modelValue", fileList);
  }
};

// 删除
const handleDelete = (index) => {
  fileList.value.splice(index, 1);
};
</script>
<style lang="scss" scoped>
.image-list {
  display: flex;
  .image-select-box {
    display: flex;

    .image-select-item {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px var(--el-border-color) dashed;
      width: 80px;
      height: 80px;
      border-radius: 8px;
    }
  }

  .img-box {
    display: flex;
    .item {
      height: 80px;
      width: 80px;
      overflow: hidden;
      position: relative;
      background: var(--el-fill-color-light);
      .img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        display: inline-block;
      }
      &:nth-of-type(n) {
        margin-right: 15px;
      }
      &:hover {
        .operate {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 80px;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          height: 30px;
          border-radius: 0 0 8px 8px;
        }
      }
      .operate {
        width: 80px;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        height: 30px;
        border-radius: 0 0 8px 8px;
      }
    }
  }
}
</style>
  
  